<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <!--[if lt IE 9]>

          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">

                <div class="layui-col-sm12 layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">最新一周添加物资数量</div>
                        <div class="layui-card-body" style="min-height: 280px;">
                            <div id="main1" class="layui-col-sm12" style="height: 300px;"></div>

                        </div>
                    </div>
                </div>

                <div class="layui-col-sm12 layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">商品操作</div>
                        <div class="layui-card-body" style="min-height: 280px;">
                            <div id="main3" class="layui-col-sm12" style="height: 300px;"></div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
        </div>

        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
        <script type="text/javascript">
 $(document).ready(function() {
                var myChart = echarts.init(document.getElementById('main1'));
                myChart.showLoading();
                var date=[];    //横坐标数组（实际用来盛放X轴坐标值）
                var goodsNumber=[];    //纵坐标数组（实际用来盛放Y坐标值）
                $.ajax({
                    type : "post",
                    async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                    url : "/echarts/goods",    //请求发送到dataActiont处
                    data : {},
                    dataType : "json",        //返回数据形式为json
                    success : function(result) {
                        if (result) {
                            for (var i = 0; i < result.length; i++) {
                                date.push(result[i].goodsBuyDate);
                                goodsNumber.push(result[i].goodsNumber);
                            }
                            myChart.hideLoading();    //隐藏加载动画
                            myChart.setOption({
                                //加载数据图表
                                title: {
                                    text: '物资数量统计图'
                                },

                                legend: {
                                    data: ['物资数量']
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                xAxis: {
                                    data: date,
                                    axisLabel: {
                                        interval: 0
                                    }

                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    // 根据名字对应到相应的系列
                                    name: '物资数量',
                                    type: 'line',
                                    data: goodsNumber
                                }]
                            });

                        }
                    },
                    error : function(errorMsg) {
                        //请求失败时执行该函数
                        alert("图表请求数据失败!");
                        myChart.hideLoading();
                    }
                })
            })


function  action(){
    $.ajax({
        url:"/echarts/items",
        type:"post",
        success:function (data) {
             var chart = echarts.init(document.getElementById('main3'));
             var option = {
                 tooltip : {
                     trigger: 'item',
                     formatter: "{a} <br/>{b} : {c} ({d}%)"
                 },
                 legend: {
                     orient: 'vertical',
                     left: 'left',
                     data: ['修改商品','删除商品','添加商品']
                 },
                 series : [
                     {
                         name: '访问来源',
                         type: 'pie',
                         radius : '55%',
                         center: ['50%', '60%'],
                         data: data ,

                         itemStyle: {
                             emphasis: {
                                 shadowBlur: 10,
                                 shadowOffsetX: 0,
                                 shadowColor: 'rgba(0, 0, 0, 0.5)'
                             }
                         }
                     }
                 ]
             };
             chart.setOption(option);

        }
    })

}
        action();
    </script>
    </body>
</html>